<template>
  <div class="block">
    <!-- 新增平台管理员 -->
    <el-button style="margin-bottom: 20px" type="primary" @click="dialogVisible"
      >新增平台管理员</el-button
    >
    <!-- 弹出层 -->
    <el-dialog title="新增平台管理员" :visible.sync="dialogFormVisible">
      <el-form
        ref="regAdminForm"
        :rules="rules"
        :model="regAdminForm"
        class="login-form"
        auto-complete="on"
        label-position="left"
      >
        <!-- 用户名 -->
        <el-form-item prop="username">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input
            ref="username"
            name="username"
            v-model="regAdminForm.username"
            placeholder="请输入账号名"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
        <!-- 请输入密码 -->
        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input
            ref="password"
            v-model="regAdminForm.password"
            :type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            auto-complete="on"
          />
          <span class="show-pwd" @click="showPwd">
            <svg-icon
              :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
            />
          </span>
        </el-form-item>
        <!-- 管理员姓名 -->
        <el-form-item prop="name">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input
            ref="name"
            name="name"
            v-model="regAdminForm.name"
            placeholder="请输入姓名"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
        <!-- 年龄 -->
        <el-form-item prop="age">
          <span class="svg-container">
            <i class="el-icon-edit"></i>
          </span>
          <el-input
            ref="age"
            name="age"
            v-model="regAdminForm.age"
            placeholder="请输入年龄"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
        <!-- 性别 -->
        <el-form-item prop="gender">
          <span class="svg-container">
            <i class="el-icon-male"></i>
          </span>
          <span style="color: #aaa; margin: 0px 20px 0px 10px">请选则性别</span>
          <el-radio v-model="regAdminForm.gender" label="男">男</el-radio>
          <el-radio v-model="regAdminForm.gender" label="女">女</el-radio>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item prop="phone">
          <span class="svg-container">
            <i class="el-icon-phone-outline"></i>
          </span>
          <el-input
            ref="phone"
            name="phone"
            v-model="regAdminForm.phone"
            placeholder="请输入手机号"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="regAdmin">新 增</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 管理员列表 -->
    <el-table
      :data="
        adminList.filter(
          (data) =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="
        width: 97%;
        border: 1px solid rgb(247, 244, 244);
      "
    >
      <el-table-column label="姓名" prop="name" />
      <el-table-column label="年龄" prop="age" />
      <el-table-column label="性别" prop="gender" />
      <el-table-column label="电话" prop="phone" />
      <el-table-column label="职位">
        <el-tag
          slot-scope="scope"
          :type="scope.row.position === '门店管理员' ? 'primary' : 'success'"
          disable-transitions
          >{{ scope.row.position }}</el-tag
        >
      </el-table-column>
      <el-table-column label="账号状态">
        <el-tag
          slot-scope="scope"
          :type="
            scope.row.status === '申请中'
              ? 'warning'
              : 'success' && scope.row.status === '未通过'
              ? 'danger'
              : 'success'
          "
          disable-transitions
          >{{ scope.row.status }}</el-tag
        >
      </el-table-column>
      <el-table-column
        label="申请状态"
        prop="status"
        :formatter="adminStatus"
      ></el-table-column>
      <el-table-column align="right">
        <!-- eslint-disable-next-line -->
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit">查看</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row._id)"
            >注销</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    // 用户名自定义验证(必须已字母开头，允许5-16字节，允许字母数字下划线)
    let usernameReg = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
    let validateUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空！！！"));
      }
      if (!usernameReg.test(value)) {
        callback(
          new Error("必须已字母开头，允许5-16字节，允许字母数字下划线！！！")
        );
      } else {
        callback();
      }
    };
    // 密码自定义验证(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
    let passwordReg = /^[a-zA-Z]\w{5,17}$/;
    let validatePassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空！！！"));
      }
      if (!passwordReg.test(value)) {
        callback(
          new Error(
            "必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线！！！"
          )
        );
      } else {
        callback();
      }
    };
    // 管理员姓名
    let nameReg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
    let validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空！！！"));
      }
      if (!nameReg.test(value)) {
        callback(new Error("不能有特殊字符和数字,中文英文不能同时出现！！！"));
      } else {
        callback();
      }
    };
    // 手机号自定义验证
    let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/;
    let validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("号码不能为空！！！"));
      }
      if (!phoneReg.test(value)) {
        callback(new Error("格式有误！！！"));
      } else {
        callback();
      }
    };
    // 年龄自定义验证(18-70)
    let ageReg = /^[0-9]*$/;
    let validateAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空！！！"));
      }
      if (!ageReg.test(value)) {
        callback(new Error("格式不正确！！！"));
      } else {
        callback();
      }
    };
    return {
      search: "",
      dialogFormVisible: false, //弹出层是否显示
      // 密码是否显示密文或者明文
      passwordType: "password",
      // 平台管理员数据
      regAdminForm: {
        // 账号
        username: "",
        // 密码
        password: "",
        // 管理员姓名
        name: "",
        // 年龄
        age: "",
        // 性别
        gender: "",
        // 手机号
        phone: "",
        // 职位(门店管理员)
        position: "门店管理员",
        // 状态(已通过)
        status: "已通过",
      },
      rules: {
        // 用户名
        username: [
          { required: true, validator: validateUsername, trigger: "blur" },
        ],
        // 密码
        password: [
          { required: true, validator: validatePassword, trigger: "blur" },
        ],
        // 管理员姓名
        name: [{ required: true, validator: validateName, trigger: "blur" }],
        // 年龄
        age: [{ required: true, validator: validateAge, trigger: "blur" }],
        // 手机号
        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.pageSearch(); // 调用查询请求参函数
  },
  computed: {
    // 获取 adminList 数据
    ...mapGetters({
      adminList: "admin/getAdminListGetter",
      page: "admin/getAdminPageGetter",
    }),
  },
  methods: {
    adminStatus(data) {
      if (data.status == "申请中") {
        return "未处理";
      } else {
        return "已处理";
      }
    },
    pageSearch(obj) {
      this.$store.dispatch("admin/getAdminListAction", obj);
    },
    // 修改管理
    handleEdit() {
      this.$router.push({ path: "shopsUsersApply" });
    },
    // 删除管理员
    handleDelete(adminId) {
      this.$store.dispatch("admin/deleteAdminAction", adminId);
      location.reload();
    },
    // 显示条数更换
    handleSizeChange(val) {
      let obj = { size: val };
      this.pageSearch(obj);
    },
    // 每页点击更换
    handleCurrentChange(val) {
      let obj = { current: val };
      this.pageSearch(obj);
    },
    // 点击切换密码是否显示明文或者密文
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    // 新增平台管理员
    dialogVisible() {
      // 显示弹出层
      this.dialogFormVisible = true;
    },
    // 关闭弹出层
    cancel() {
      this.dialogFormVisible = false;
    },
    regAdmin() {
      this.$refs.regAdminForm.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch("admin/registerAdminAction", this.regAdminForm)
            .then((res) => {
              if (res) {
                window.location.reload();
              } else {
                window.alert("账号已注册,请重新输入！！！");
              }
            });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.block {
  padding: 50px;
}
.page{
  margin-top: 20px;
}
</style>
